import React from 'react';
import {
  Form, Select, Tooltip, SelectBox,
} from 'choerodon-ui/pro';
import { get } from 'lodash';
import { observer } from 'mobx-react-lite';
import Tips from '@/components/new-tips';
import { mapping } from '../../stores/auditDataSet';

const { Option } = Select;

const Index = observer(({
  ds,
  type,
}: any) => {
  const getauditUsersSearchMatcher = (
    { record, text, textField }: any,
  ) => record.get(textField) && (record.get(textField).indexOf(text) !== -1
    || record.get('loginName').indexOf(text) !== -1
  );

  const renderderAuditUsersList = ({ text, record }: any) => {
    const ldap = record?.get('ldap');
    const str = ldap ? `${text}(${record?.get('loginName')})` : `${text}(${record?.get('email')})`;
    return (
      <Tooltip title={str}>
        {str}
      </Tooltip>
    );
  };
  return (
    <Form columns={type?.includes('cd_') ? 1 : 2} dataSet={ds}>
      <Select
        colSpan={1}
        popupCls="addcdTask-auditUsers"
        searchable
        style={{ width: '100%' }}
        name={mapping.cdAuditUserIds.name}
        maxTagCount={3}
        searchMatcher={getauditUsersSearchMatcher}
                      // onInput={(e) => {
                      //   handleUserSearch(e);
                      // }}
        maxTagPlaceholder={(omittedValues) => {
          const tempArr = omittedValues.map((item) => {
            const tempId = typeof item === 'string' ? item : item?.id;
            return ds.getField('cdAuditUserIds').getText(tempId);
          });
          return (
            <Tooltip title={tempArr && tempArr.join('，')}>
              <span style={{ width: '31px', display: 'block' }}>
                {`+${omittedValues.length}`}
                ...
              </span>
            </Tooltip>
          );
        }}
        optionRenderer={renderderAuditUsersList}
        renderer={({ text, value }) => {
          if (typeof value === 'object') {
            const isLdap = get(value, 'ldap');
            return (
              <Tooltip
                title={
                                isLdap
                                  ? `${value.realName}(${value.loginName})`
                                  : `${value.realName}(${value.email})`
                              }
              >
                {value.realName}
              </Tooltip>
            );
          }
          return <Tooltip title={text}>{text}</Tooltip>;
        }}
      />
      {ds?.current?.get('cdAuditUserIds')?.length > 1 && (
        <SelectBox
          colSpan={1}
          name="countersigned"
          addonAfter={
            <Tips helpText="会签模式中，需要所有审核人员都审核通过才能通过，审核人员中任一人点击终止，则流水线终止；或签模式中，仅需任一审核人员审核即可，即第一个审核的人点击通过则通过，点击终止则终止" />
                  }
        >
          <Option value={1}>会签</Option>
          <Option value={0}>或签</Option>
        </SelectBox>
      )}
    </Form>
  );
});

export default Index;
